import { useUserStore } from "../stores/UserStore";
import { watchEffect } from 'vue';

export default {
  mounted(el: HTMLElement, binding: any) {
    const userStore = useUserStore();

    const updateVisibility = () => {
      const requiredRoles: string | string[] = binding.value;

      let hasAccess = false;

      if (Array.isArray(requiredRoles)) {
        // 逻辑 OR: 只要用户拥有数组中的任意一个角色
        hasAccess = requiredRoles.some(role => userStore.userInfo.authorityStrings?.includes(role));
      } else if (typeof requiredRoles === 'string') {
        hasAccess = userStore.userInfo.authorityStrings?.includes(requiredRoles) || false;
      }

      if (!hasAccess) {
        el.style.display = 'none';
      } else {
        el.style.display = '';
      }
    };

    // 初始检查
    updateVisibility();

    // 监听 authorityStrings 的变化
    watchEffect(() => {
      updateVisibility();
    });
  }
};
